/**
*@author ymhui
*@createTime 05 17:14
*@description
*/
<template>
  <div id="comprehensive" v-loading="loading"
       element-loading-text="正在加载数据"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-card class="compre-card" :style="style">
      <div>
        <span style="color: white; font-size: 15px; padding-bottom: 20px">综合情况</span>
      </div>
      <div style="margin-top: .1rem">
        <el-row class="num-row">
          <el-col :span="8" v-text="comprehensive.totalAlarmNum+ '台'">4台</el-col>
          <el-col :span="8" v-text="comprehensive.handledAlarmNum+ '台'">4台</el-col>
          <el-col :span="8" v-text="comprehensive.unhandledAlarmNum+ '台'">4台</el-col>
        </el-row>
        <el-row class="tag-row">
          <el-col :span="8">报警总数</el-col>
          <el-col :span="8">已处理总数</el-col>
          <el-col :span="8">未处理总数</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px; padding-bottom: .5em">
        <el-row class="num-row">
          <el-col :span="8" v-text="comprehensive.totalDevNum+ '台'">4台</el-col>
          <el-col :span="8" v-text="comprehensive.onlineDevNum+ '台'">4台</el-col>
          <el-col :span="8" v-text="comprehensive.offlineDevNum+ '台'">4台</el-col>
        </el-row>
        <el-row class="tag-row">
          <el-col :span="8">设备总数</el-col>
          <el-col :span="8">在线总数</el-col>
          <el-col :span="8">离线总数</el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
    import Gauge from "./LastestValue/Gauge";
    import {mapActions, mapGetters} from 'vuex';

    export default {
        name: "Comprehensive",
        components: {
            Gauge
        },
        computed: {
            ...mapGetters([
                'comprehensive'
            ])
        },
        props: {
            isFullScreen: Boolean
        },
        data: function () {
            return {
                loading: false,
                timeTask: null,
                style:"height:12em"
            }
        },
        methods: {
            ...mapActions([
                'initComprehensiveAct'
            ]),
            initData() {
                this.loading = true;
                this.initComprehensiveAct().then(result => {
                    console.log(this.comprehensive.totalDevNum);
                    console.log(this.comprehensive);
                    this.loading = false;
                }).catch(error => {
                    this.$message.error(error);
                    this.loading = false;
                })
            },
            chartTimeTask() {
                this.timeTask = setInterval(() => {
                    console.log('执行综合情况刷新任务');
                    this.initData();
                }, 1000 * 300)
            },
            wrapStyle() {
                if (this.isFullScreen) {
                    this.style = "height:16em;";
                } else {
                    this.style = "height:12em;";
                }
            }
        },
        watch: {
            isFullScreen(oldValue, newValue) {
                if (oldValue !== newValue) {
                    this.wrapStyle();
                }
            }
        },
        mounted() {
            this.initData();
            this.chartTimeTask();
        },
        beforeDestroy() {
            clearInterval(this.timeTask);
        }
    }
</script>

<style lang="scss" scoped>
  .compre-card {
    background-color: transparent;
    box-shadow: inset 0px 0px 20px 20px rgba(254, 253, 255, 0.1);
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */
    border-color: #03a6ff;
  }

  .num-row {
    .el-col {
      color: #03d0ff;
      font-size: 1em;
    }
  }

  .tag-row {
    margin-top: 10px;

    .el-col {
      color: white;
      font-size: 14px;
    }
  }
</style>
